<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0;
        }
        
        #box {
            width: 500px;
            height: 300px;
            background-color: rgb(187, 87, 87);
            position: relative;
            margin: 30px auto;
            overflow: hidden;
        }
        
        #root {
            background-color: rgb(55, 84, 179);
            position: absolute;
            width: 3100px;
            left: 0;
            transition: all 1s;
        }
        
        img {
            width: 500px;
            margin: 0;
            /* height: 100px; */
        }
    </style>

</head>

<body>
    <div id="box">
        <div id="root">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <!-- <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt=""> -->
        </div>
    </div>

</body>

</html>
<script>
    var root = document.getElementById('root');
    var a = 0;

    var b = setInterval(function() {
        root.style.left = -500 * a + 'px';
        a++;
        if (a > 5) {
            a = 0;
            clearInterval(b);
        }
    }, 1000)
</script>